import React, { Component } from "react";
import { List} from "antd";
import defaultImg from "./images/default.gif";
import "./index.css"

export default class ImgList extends Component {
  render() {
    const { itemNames } = this.props;
    return (
      <div style={{marginLeft:'10px',marginRight:'10px'}}>
        <List
          split={false}
          grid={{
            gutter: 16,
            xs: 3,
            sm: 3,
            md: 4,
            lg: 4,
            xl: 6,
            xxl: 6,
          }}
          dataSource={itemNames}
          renderItem={(itemName) => (
            <List.Item>
              <div class="MyItem">
                <img src={defaultImg} width={"100%"} />
                <center>{itemName}</center>
              </div>
              {/* <Card title={itemName}>
                <img src={defaultImg} width={'100%'}/>
              </Card> */}
            </List.Item>
          )}
        />
      </div>
    );
  }
}
